<script setup lang="tsx">
import { DndProvider } from 'vue3-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import DragNav from '@/views/Drag/components/DragNav.vue'
import DragContent from '@/views/Drag/components/DragContent.vue'
import DragSetting from '@/views/Drag/components/DragSetting.vue'
</script>

<template>
  <DndProvider :backend="HTML5Backend">
    <div class="drag-container">
      <DragNav />
      <DragContent />
      <DragSetting />
    </div>
  </DndProvider>
</template>

<style lang="less" scoped>
.drag-container {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  :deep(.drag-content) {
    flex: 1;
  }
  :deep(.drag-setting) {
    width: 260px;
  }
}
</style>
